<template>
	<view class="lease-contract">

		<!-- 合同下载 -->
		<view class="contract-file-wrap">
			<!-- 文件Icon -->
			<u-icon name="/bundle/static/images/pdf.png" width="80" height="96" />
			<!-- 文件名 -->
			<view class="contract-name mt10">租赁合同.pdf</view>
			<!-- 文件大小 -->
			<!-- <view class="contract-size">3.21MB</view> -->
			<!-- 下载按钮 -->
			<view class="contract-download" @tap="onDownloadContract">下载</view>
		</view>


		<!-- 上传合同 -->
		<template v-if="contractStatus == 1 || contractStatus == 4">
			<view class="container">
				<!-- 合同 -->
				<view>
					<view class="container-header">
						<text class="container-title">合同</text>
						<text class="container-tips">(最多可上传8张，支持jpg、png格式)</text>
					</view>
					<view>
						<u-upload ref="uUpload" width="162" height="162" :auto-upload="false" :custom-btn="true"
							:border-bottom="false" :show-progress="false" :file-list="uploadedPictures" max-count="8"
							@on-remove="handlePictureRemove" @on-choose-complete="handlePictureUpload">
							<view slot="addBtn" class="picture-button--upload">
								<u-icon name="/static/images/icon_camera.png" width="54" />
								<view class="xs normal">上传图片</view>
							</view>
						</u-upload>
					</view>
				</view>
				<!-- 身份证 -->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证</text>
						<text class="container-tips">(正、反面，手持身份证，支持jpg、png格式)</text>
					</view>
					<view>
						<u-upload ref="uUpload" width="162" height="162" :auto-upload="false" :custom-btn="true"
							:border-bottom="false" :show-progress="false" :file-list="uploadedPicturesID" max-count="3"
							@on-remove="handlePictureRemoveID" @on-choose-complete="handlePictureUploadID">
							<view slot="addBtn" class="picture-button--upload">
								<u-icon name="/static/images/icon_camera.png" width="54" />
								<view class="xs normal">上传图片</view>
							</view>
						</u-upload>
					</view>
				</view>

				<!--人脸照片-->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">人脸照片</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-upload ref="uUpload" width="162" height="162" :auto-upload="false" :custom-btn="true"
							:border-bottom="false" :show-progress="false" :file-list="uploadedFacePictures"
							max-count="1" @on-remove="handlefacePictureRemove"
							@on-choose-complete="handlefacePictureUpload" :source-type="['camera']">
							<view slot="addBtn" class="picture-button--upload">
								<u-icon name="/static/images/icon_camera.png" width="54" />
								<view class="xs normal">上传图片</view>
							</view>
						</u-upload>
					</view>
				</view>


				<!--芝麻分录屏-->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">芝麻分录屏</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<view class="picture-button--upload" @tap="chooseVideo('zhimafen')" v-if="!zhimafenShowUrls[0]">
							<u-icon name="/static/images/icon_camera.png" width="54" />
							<view class="xs normal">上传视频</view>
						</view>
						<view v-else class="video-wrap">
							<video id="zhimafenVideo" :src="zhimafenShowUrls[0]">
							</video>
							<u-icon name="close" color="#2979ff" size="28" @tap="delzhimafenVedio"></u-icon>
						</view>


						<!-- <view  class="video-wrap">
							 <video id="zhimafenVideo" src="">
							 </video>
							 <u-icon name="close" color="red" size="28" @tap="delzhimafenVedio"></u-icon>
						</view> -->

					</view>
				</view>

				<!-- 公积金录屏 -->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">公积金录屏</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<view class="picture-button--upload" @tap="chooseVideo('gongjijin')"
							v-if="!gongjijinShowUrls[0]">
							<u-icon name="/static/images/icon_camera.png" width="54" />
							<view class="xs normal">上传视频</view>
						</view>
						<view v-else class="video-wrap">
							<video id="gongjijinVideo" :src="gongjijinShowUrls[0]"></video>
							<u-icon name="close" color="#2979ff" size="28" @tap="delgongjijinVedio"></u-icon>
						</view>
					</view>
				</view>
				
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">客户姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="trueName" />
					</view>
				</view>


				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证号码</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="cardID" />
					</view>
				</view>

				
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">本人手机号码</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="mobile" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">工作单位名称</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_unit_name" placeholder=""/>
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">工作单位地址</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_unit_addr" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">单位电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_unit_tel" placeholder=""/>
					</view>
				</view>
				
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">部门职位</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="position" placeholder=""/>
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">工作年限</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_year" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_tel" />
					</view>
				</view>
				
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶单位名称</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_unit_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶单位地址</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_unit_addr" />
					</view>
				</view>
				
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">父亲电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="father_tel" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">父亲姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="father_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">母亲姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="mother_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">母亲电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="mother_tel" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">朋友姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="friend_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">朋友电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="friend_tel" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">同事姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="colleague_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">同事电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="colleague_tel" />
					</view>
				</view>
				
				
				<view class="button--uploader" @tap="onSubmit">{{ contractStatus == 1 ? '实名认证' : '重新上传'}}</view>
			</view>
		</template>



		<!-- 预览已上传合同 -->
		<template v-if="uploadedPictures.length && contractStatus != 4">
			<view class="container">
				<!-- 合同 -->
				<view>
					<view class="container-header">
						<text class="container-title">合同</text>
						<!-- <text class="container-tips">(最多可上传8张，支持jpg、png格式)</text> -->
					</view>
					<view class="uploaded-pictures">
						<block v-for="(item, index) in pictures" :key="index">
							<!-- #ifndef MP-ALIPAY -->
							<u-image class="mr20 mb20" width="162" height="162" border-radius="3px"
								@tap="showPicture(index)" :src="item" />
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<image :src="item" mode="aspectFill" @tap="showPicture(index)"
								style="width: 162rpx; height: 162rpx; border-radius: 3px;" />
							<!-- #endif -->
						</block>
					</view>
				</view>
				
				
				
				
				
				<!-- 身份证 -->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证</text>
						<!-- <text class="container-tips">(最多可上传2张，支持jpg、png格式)</text> -->
					</view>
					<view class="uploaded-pictures">
						<block v-for="(item, index) in picturesID" :key="index">
							<!-- #ifndef MP-ALIPAY -->
							<u-image class="mr20 mb20" width="162" height="162" border-radius="3px"
								@tap="showPictureID(index)" :src="item" />
							<!-- #endif -->
							<!-- #ifdef MP-ALIPAY -->
							<image :src="item" mode="aspectFill" @tap="showPictureID(index)"
								style="width: 162rpx; height: 162rpx; border-radius: 3px;" />
							<!-- #endif -->
						</block>
					</view>
				</view>

                 <!--人脸照片-->
				 <view class="mt30">
				 	<view class="container-header">
				 		<text class="container-title">人脸照片</text>
				 		
				 	</view>
				 	<view class="uploaded-pictures">
				 		<block v-for="(item, index) in facePictures" :key="index">
				 			<!-- #ifndef MP-ALIPAY -->
				 			<u-image class="mr20 mb20" width="162" height="162" border-radius="3px"
				 				@tap="showPictureID(index)" :src="item" />
				 			<!-- #endif -->
				 			<!-- #ifdef MP-ALIPAY -->
				 			<image :src="item" mode="aspectFill" @tap="showPictureID(index)"
				 				style="width: 162rpx; height: 162rpx; border-radius: 3px;" />
				 			<!-- #endif -->
				 		</block>
				 	</view>
				 </view>
				 
				 
				 <!--芝麻分录屏-->
				 <view class="mt30">
				 	<view class="container-header">
				 		<text class="container-title">芝麻分录屏</text>
				 		
				 	</view>
				 	<view class="uploaded-pictures">
				 		<block v-for="(item, index) in zhimafenShowUrls" :key="index">
				 			<video id="myVideo" :src="item"></video>
				 		</block>
				 	</view>
				 </view>
				 
				 
				 <!--公积金录屏-->
				 <view class="mt30">
				 	<view class="container-header">
				 		<text class="container-title">公积金录屏</text>
				 		
				 	</view>
				 	<view class="uploaded-pictures">
				 		<block v-for="(item, index) in gongjijinShowUrls" :key="index">
				 			<video id="myVideo" :src="item"></video>
				 		</block>
				 	</view>
				 </view>


				<!-- 身份证号码 -->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">身份证号码</text>
					</view>
					<view>
						<u-input v-model="cardID" disabled />
					</view>
				</view>
				
				<!--真实姓名-->
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">真实姓名</text>
					</view>
					<view>
						<u-input v-model="trueName" disabled />
					</view>
				</view>
				
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">本人手机号码</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="mobile" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">工作单位名称</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_unit_name" placeholder=""/>
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">工作单位地址</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_unit_addr" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">单位电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_unit_tel" placeholder=""/>
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">部门职位</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="position" placeholder=""/>
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">工作年限</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="work_year" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_tel" />
					</view>
				</view>
				
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶单位名称</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_unit_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">配偶单位地址</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="spouse_unit_addr" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">父亲电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="father_tel" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">父亲姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="father_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">母亲姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="mother_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">母亲电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="mother_tel" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">朋友姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="friend_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">朋友电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="friend_tel" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">同事姓名</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="colleague_name" />
					</view>
				</view>
				
				<view class="mt30">
					<view class="container-header">
						<text class="container-title">同事电话</text>
						<text class="container-tips"></text>
					</view>
					<view>
						<u-input v-model="colleague_tel" />
					</view>
				</view>
				
			</view>
		</template>


		<!-- 审核状态 -->
		<template v-if="contractStatus != 1">
			<view class="container">
				<view class="container-header">
					<text class="container-title">审核结果</text>
				</view>
				<view class="audit-item">
					<view class="audit-label">审核状态</view>
					<view class="audit-content">
						<template v-if="contractStatus == 2">
							<text class="normal">审核中</text>
						</template>
						<template v-else-if="contractStatus == 3">
							<text class="primary">审核通过</text>
						</template>
						<template v-else-if="contractStatus == 4">
							<text class="ornament">审核失败</text>
						</template>
					</view>
				</view>
				<view class="audit-remark">
					<view class="audit-remark-label">商家备注</view>
					<view class="audit-remark-content">{{ remarks || '' }}</view>
				</view>
			</view>
		</template>


		<!-- 提示 -->
		<view class="tips" v-if="isShowTips">
			<u-icon class="mr20" name="error-circle-fill" color="#FF2C3C" size="40" />
			<text class="tips-content">
				请先下载合同填写完善信息后再拍照上传
				请填写真实的信息
			</text>
			<u-icon name="close" color="#F95F2F" @tap="isShowTips = false" />
		</view>

	</view>
</template>


<script>
	import {
		uploadFile
	} from '@/utils/tools'

	import {
		getLeaseContractDetail,
		leaseContractSubmit
	} from '@/api/lease'

	import {
		getSign
	} from '@/api/oss'


	export default {
		data() {
			return {
				contractID: '', // 合同ID
				contractStatus: '', // 合同状态
				remarks: '', // 审核备注
				pictures: [], // 合同图片
				picturesID: [], // 身份证图片
				facePictures: [], // 人脸照片
				//zhimafenVedio: [], //芝麻分录屏
				//gongjijinVedio: [], //公积金录屏


				cardID: '', // 身份证号码
				trueName: '', //真是姓名
				mobile:'',  // 本人手机号码
				
				work_unit_name:'', 
				work_unit_addr:'',
				work_unit_tel:'',
				work_year:'',  //工作年限
				position:'',  //部门职位
				
				
				spouse_name:'',  //配偶姓名
				spouse_tel:'',  //配偶电话
				spouse_unit_name:'', //配偶单位名称
				spouse_unit_addr:'',  //配偶单位地址
				
				father_tel:'',
				father_name:'',
				mother_tel:'',
				mother_name:'',
				friend_tel:'',
				friend_name:'',
				colleague_tel:'',
				colleague_name:'',
				
				
				contractDownloadURL: '', // 合同下载地址

				uploadedPictures: [], // 已上传图片
				uploadedPicturesID: [], // 身份证已上传图片
				uploadedFacePictures: [], //人脸已上传图片

				//uploadedZhimafenVedio: [], //芝麻分录屏已上传视频
				//uploadedgongjijinVedio: [], //公积金录屏已上传视频

				zhimafenShowUrls: [],
				gongjijinShowUrls: [],

				ossData: null,

				isShowTips: true, // 是否显示悬浮提示语
			}
		},


		methods: {

			delzhimafenVedio() {
				console.log('delzhimafenVedio');
				this.zhimafenShowUrls.splice(0, 1);
			},

			delgongjijinVedio() {
				this.gongjijinShowUrls.splice(0, 1);
			},



			// 上传视频
			async chooseVideo(type) {
				uni.showLoading({
					mask: true,
					title: '上传中...'
				})
				// uploadFile 存储需要上传的文件
				let uploadFile = ''
				// 1.选择要上传的视频
				const res = await uni.chooseVideo({
					maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					// album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
					sourceType: ['album'],
					compressed: false
				});

				console.log('chooseImage-res:-----', res[1].tempFilePath);

				uploadFile = res[1].tempFilePath;
				console.log('uploadFile-------' + uploadFile);
				var that2 = this;

				const fileInfo = res[1];

				let fileName = new Date().getTime() + 'app' + fileInfo.tempFilePath.substr(fileInfo.tempFilePath
					.length - 6, )

				console.log('fileName:---' + fileName);

				// 2.上传所选视频到服务器
				const arr = await uni.uploadFile({
					// 需要上传的地址
					url: 'http://jiafeimaozulin.oss-cn-beijing.aliyuncs.com',
					// filePath  需要上传的文件
					filePath: uploadFile,
					fileType: 'video',
					name: 'file',

					formData: {
						key: 'uploads/' + fileName, //文件名
						policy: this.ossData.policy, //后台获取超时时间
						OSSAccessKeyId: this.ossData.accessid, //后台获取临时ID
						success_action_status: '200', //让服务端返回200,不然，默认会返回204
						signature: this.ossData.signature //后台获取签名
					},


				});
				//let data = JSON.parse(arr[1])
				let data = arr[1]
				console.log('success-data---------------:', data);

				if (data.statusCode !== 200 || data.errMsg !== 'uploadFile:ok') { // 视频上传失败了
					uni.hideLoading()
					that2.$u.toast(data.msg)
					return
				}

				console.log('oss-url:---' + this.ossData.host + '/uploads/' + fileName);

				const ossUrl = this.ossData.host + '/uploads/' + fileName;

				// 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)

				if (type === 'zhimafen') {
					//that2.uploadedZhimafenVedio.push(ossUrl)
					that2.zhimafenShowUrls.push(ossUrl)
				} else {
					//that2.uploadedgongjijinVedio.push(ossUrl)
					that2.gongjijinShowUrls.push(ossUrl)
				}

				uni.hideLoading()
			},


			// 下载合同
			onDownloadContract() {
				// this.isDownloading = true;
				uni.navigateTo({
					url: `/bundle/pages/lease_contract_download/lease_contract_download?url=${this.contractDownloadURL}`
				})
			},

			// 查看图片
			showPicture(index) {
				uni.previewImage({
					current: index,
					urls: this.pictures
				});
			},

			showPictureID(index) {
				uni.previewImage({
					current: index,
					urls: this.picturesID
				});
			},

			// 图片上传
			handlePictureUpload(lists, index) {
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});

				const LEN = lists.length;

				const initLen = this.pictures.length
				for (let i = initLen; i < LEN; ++i) {
					const file = {
						...lists[i]
					};

					uploadFile(file.url).then(res => {
						this.pictures.push(res.url);
					}).catch(err => {
						this.$toast({
							title: '上传失败'
						})
					}).finally(() => {
						uni.hideLoading();
					})
				}
			},

			handlePictureUploadID(lists, index) {
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});

				const LEN = lists.length;

				const initLen = this.picturesID.length;
				for (let i = initLen; i < LEN; ++i) {
					const file = {
						...lists[i]
					};

					uploadFile(file.url).then(res => {
						this.picturesID.push(res.url)
					}).catch(err => {
						this.$toast({
							title: '上传失败'
						})
					}).finally(() => {
						uni.hideLoading();
					})
				}
			},

			//人脸
			handlefacePictureUpload(lists, index) {
				uni.showLoading({
					title: '正在上传中...',
					mask: true
				});

				const LEN = lists.length;

				const initLen = this.facePictures.length
				for (let i = initLen; i < LEN; ++i) {
					const file = {
						...lists[i]
					};

					uploadFile(file.url).then(res => {
						this.facePictures.push(res.url);
					}).catch(err => {
						this.$toast({
							title: '上传失败'
						})
					}).finally(() => {
						uni.hideLoading();
					})
				}
			},


			// 图片删除
			handlePictureRemove(index, lists, name) {
				this.pictures.splice(index, 1)
			},

			// 图片删除
			handlePictureRemoveID(index, lists, name) {
				this.picturesID.splice(index, 1)
			},

			handlefacePictureRemove(index, lists, name) {
				this.facePictures.splice(index, 1)
			},


			// 点击提交
			onSubmit() {
				if (!this.pictures.length) return this.$toast({
					title: '合同不能没有内容'
				});
				if (!this.picturesID.length) return this.$toast({
					title: '身份证照片不能没有内容'
				});
				
				if(!this.facePictures.length){
					this.$toast({
						title: '人脸照片不能没有内容'
					});
				}
				
				if(!this.zhimafenShowUrls.length){
					this.$toast({
						title: '芝麻分录屏不能没有内容'
					});
				}
				
				if(!this.gongjijinShowUrls.length){
					this.$toast({
						title: '公积金录屏不能没有内容'
					});
				}
				
				
				if (!this.cardID) return this.$toast({
					title: '身份证号码不能没有内容'
				});
				
				
				if (!this.trueName) return this.$toast({
					title: '真实姓名不能没有内容'
				});
				
				if (!this.mobile) return this.$toast({
					title: '手机号码不能没有内容'
				});
				
				
				
				const pictures = this.pictures.join(',');
				const picturesID = this.picturesID.join(',');
				const facePictures = this.facePictures.join(',');
				const zhimafenShowUrls = this.zhimafenShowUrls.join(',');
				const gongjijinShowUrls = this.gongjijinShowUrls.join(',');
				leaseContractSubmit({
					id: this.contractID,
					contract: pictures,
					id_image: picturesID,
					
					face_image: facePictures,
					zhimafen_video:zhimafenShowUrls,
					gongjijin_video:gongjijinShowUrls,
					
					id_number: this.cardID,
					trueName: this.trueName,
					
					mobile:this.mobile,  // 本人手机号码
					
					work_unit_name:this.work_unit_name,
					work_unit_addr:this.work_unit_addr,
					work_unit_tel:this.work_unit_tel,
					work_year:this.work_year,  //工作年限
					position:this.position,  //部门职位
					
					
					spouse_name:this.spouse_name,  //配偶姓名
					spouse_tel:this.spouse_tel,  //配偶电话
					spouse_unit_name:this.spouse_unit_name, //配偶单位名称
					spouse_unit_addr:this.spouse_unit_addr,  //配偶单位地址
					
					father_tel: this.father_tel,
					father_name:this.father_name,
					mother_tel:this.mother_tel,
					mother_name:this.mother_name,
					friend_tel:this.friend_tel,
					friend_name:this.friend_name,
					colleague_tel:this.colleague_tel,
					colleague_name:this.colleague_name,
					
				}).then(({
					code
				}) => {
					if (code != 1) return;
					uni.showToast({
						title: '上传成功',
						icon: 'success'
					});
					setTimeout(() => uni.navigateBack(), 500);
				});
			}
		},

		onLoad(options) {
			const id = options.id;

			getSign().then(({
				code,
				data
			}) => {
				console.log('data---sign---:' + data.signature);
				this.ossData = data;
			})



			getLeaseContractDetail({
				id
			}).then(({
				code,
				data
			}) => {

				this.contractID = data.id;
				this.remarks = data.remarks;
				this.contractStatus = data.contract_status;
				this.contractDownloadURL = data.contract_down;
				this.cardID = data.id_number;
				this.trueName = data.true_name;

				if (data.contract_up) {
					const pictures = data?.contract_up?.split(',') || [];
					const picturesID = data?.id_image?.split(',') || [];
					const facePictures = data?.face_image?.split(',') || [];
					const zhimafenShowUrls = data?.zhimafen_video?.split(',') || [];
					const gongjijinShowUrls = data?.gongjijin_video?.split(',') || [];
					
					this.pictures = pictures;
					this.picturesID = picturesID;
					this.facePictures = facePictures;
					this.zhimafenShowUrls = zhimafenShowUrls;
					this.gongjijinShowUrls = gongjijinShowUrls;
					
					
					//渲组件
					pictures.forEach(item => this.uploadedPictures.push({
						url: item
					}));
					picturesID.forEach(item => this.uploadedPicturesID.push({
						url: item
					}));
					facePictures.forEach(item => this.uploadedFacePictures.push({
						url: item
					}));

				}
			});
		}
	}
</script>


<style scoped>
	.video-wrap {
		position: relative;

	}

	.video-wrap .u-icon {
		position: absolute;
		right: 0;
		top: 0;
	}


	.container {
		margin: 20rpx 0;
		padding: 20rpx 30rpx 30rpx 30rpx;
		background-color: #FFFFFF;
	}

	.container-header {
		padding-bottom: 20rpx;
	}

	.container-title {
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
	}

	.container-tips {
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #BBBBBB;
	}

	.contract-file-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 460rpx;
		background-color: #FFFFFF;
	}

	.contract-name {
		font-size: 26rpx;
		color: #333333;
	}

	.contract-size {
		margin-bottom: 20rpx;
		font-size: 22rpx;
		color: #999999;
	}

	.contract-download {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 420rpx;
		height: 82rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		border: 1px solid #D7D7D7;
		border-radius: 10px;
		color: #333333;
	}

	.button--uploader {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		border-radius: 5px;
		background-color: #FF4D40;
		color: #FFFFFF;
	}

	.picture-button--upload {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 162rpx;
		height: 162rpx;
		border: 2rpx dashed #CCCCCC;
		border-radius: 5px;
	}

	.uploaded-pictures {
		display: flex;
		flex-wrap: wrap;
	}

	.audit-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 30rpx 0;
		border-bottom: 1px solid #D7D7D7;
	}

	.audit-label {
		font-size: 30rpx;
		color: #666666;
	}

	.audit-content {
		font-size: 30rpx;
		color: #333333;
	}

	.audit-remark-label {
		padding: 20rpx 0 10rpx 0;
	}

	.audit-remark-content {
		min-height: 120rpx;
		padding: 12rpx 20rpx;
		border: 1px solid #D7D7D7;
		border-radius: 5px;
	}

	.tips {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		height: 72rpx;
		padding: 0 20rpx;
		background-color: #FFFADE;
	}

	.tips-content {
		margin-right: auto;
		font-size: 26rpx;
		color: #F95F2F;
	}
</style>